<template>
  地图类型：
  <el-select v-model="BMapSetting.type" @change="selectLineByInitMap" placeholder="请选择">
    <el-option  v-for="item in BMapSetting.mapTypeOP" :value="item.id" :label="item.name" :key="item.id"></el-option>
  </el-select>
  <br/>
  <br/>
  <div class="tiandituMap">
    <div id="mapDiv" style="width:500px; height:400px ;z-index:0"></div>
  </div>
</template>
<script lang='ts' setup>
import {reactive, ref, onMounted} from "vue";
import app from "@/constants/app";
import {forEach} from "lodash";
const mapContainer = ref(null);
const BMapSetting = reactive({
  type:"22",
  mapTypeOP:[
    {id:"11",name:"普通街道视图",value:window.TMAP_NORMAL_MAP},
    {id:"22",name:"卫星视图",value:window.TMAP_SATELLITE_MAP},
    {id:"33",name:"卫星和路网的混合视图",value:window.TMAP_HYBRID_MAP},
    {id:"44",name:"地形视图",value:window.TMAP_TERRAIN_MAP},
    {id:"55",name:"地形和路网的混合视图",value:window.TMAP_TERRAIN_HYBRID_MAP},
  ]
})

const selectLineByInitMap=()=>{
  initMap()
}
onMounted(() => {
  initMap()
});
let zoom = ref(15) //层级
let allPoints: any = []; //所有点


const initMap = () => {
  let T = window.T; //这里T指向天地图对象
  let  mapTypeOP = [
    {id:"11",name:"普通街道视图",value:window.TMAP_NORMAL_MAP},
    {id:"22",name:"卫星视图",value:window.TMAP_SATELLITE_MAP},
    {id:"33",name:"卫星和路网的混合视图",value:window.TMAP_HYBRID_MAP},
    {id:"44",name:"地形视图",value:window.TMAP_TERRAIN_MAP},
    {id:"55",name:"地形和路网的混合视图",value:window.TMAP_TERRAIN_HYBRID_MAP},
  ]
  BMapSetting.mapTypeOP =mapTypeOP;
  if (T) {
    const map = new T.Map('mapDiv');
    //这一步调用了天地图的setMapType方法，用来设置天地图的图层类型，我这里设置的是卫星图图层
    for (let i=0;i<BMapSetting.mapTypeOP.length;i++){
      const item =BMapSetting.mapTypeOP[i];
      if(BMapSetting.type === item.id){
        map.setMapType(item.value);
      }
    }
    //创建图片对象
    var icon = new T.Icon({
      iconUrl: "http://api.tianditu.gov.cn/img/map/markerA.png",
      iconSize: new T.Point(19, 27),
      iconAnchor: new T.Point(10, 25)
    });
    //向地图上添加自定义标注
    var marker = new T.Marker(new T.LngLat(116.411794, 39.9068), {icon: icon});
    map.addOverLay(marker);
    //向地图上添加自定义标注
    var markers = new T.Marker(new T.LngLat(116.404, 39.915), {icon: icon});
    map.addOverLay(markers);

    let opts = {
      text: "你好",
      position: new T.LngLat(116.404, 39.915), // 指定文本标注所在的地理位置
      offset: new T.Point(10, -10) // 设置文本偏移量
    };
    // 创建文本标注对象
    let label = new T.Label(opts);
    map.addOverLay(label);

    let opts2 = {
      text: "你好2",
      position: new T.LngLat(116.411794, 39.9068), // 指定文本标注所在的地理位置
      offset: new T.Point(10, -10) // 设置文本偏移量
    };
    // 创建文本标注对象
    let label2 = new T.Label(opts2);
    map.addOverLay(label2);
    //这一步设置的是地图的初始化后的中心点坐标以及缩放级别
    //做完这一步，天地图就以及能在地图上显示出来了
    map.centerAndZoom(new T.LngLat(116.404, 39.915), zoom.value); // 设置中心点和缩放等级
  }
}
</script>
<style lang='less' scoped>
.tiandituMap{
  width: 100%;
  height: 100%;
}

.map-container {
  width: 100%;
  height: 100%;
}
</style>
